<template>
	<view>
		<view class="subscribeInfo">
			<view class="infoItem">
				<view class="label">联系人</view>
				<view class="value">
					<view>
						<u-input v-model="contacts" :type="text" :border="false" input-align="right" placeholder="请填写联系人"/>
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">联系电话</view>
				<view class="value">
					<view>
						<u-input v-model="mobile" :type="text" :border="false" input-align="right" placeholder="请填写联系电话"/>
					</view>					
				</view>
			</view>
			<view class="infoItem">
				<view class="label">门店规模</view>
				<view class="value">
					<view>
						<u-input v-model="scale" :type="text" :border="false" input-align="right" placeholder="请填写门店规模"/>
					</view>					
				</view>
			</view>
			<view class="infoItem">
				<view class="label">门店地址</view>
				<view class="value">
					<view>
						<u-input v-model="address" :type="text" :border="false" input-align="right" placeholder="请填写门店地址"/>
					</view>					
				</view>
			</view>
		</view>
		
		<view class="image">
			<view class="image-top">
				<view class="top-title">
					门店图片
				</view>
				<view class="top-tishi">
					（审核通过相关的产品资料）
				</view>
				<view class="top-content">
					<u-upload
						ref="uUpload"
						:action="action"
						:auto-upload="true"
						max-count="6"
						name="image"
						size-type="['compressed']"
						@on-change="getImage"
						>
					</u-upload>
				</view>
			</view>
		</view>
		
		<view class="" style="padding: 20px;">
			<u-button type="primary" @click="submit">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contacts: '',//联系人
				mobile: '',//联系人电话
				scale: '',//门店规模
				address: '',//门店地址
				action: 'https://adjyxw.h1668.com/home/product/Product/upload',//图片上传路径
				imageUrl: '',//门店图片路径
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
			this.contacts = this.userData.nickname
			this.mobile = this.userData.mobile
		},
		methods: {
			//提交按钮
			submit() {
				if(this.mobile == '') {
					uni.$u.toast('请填写联系人电话')
				}else if(this.contacts == ''){
					uni.$u.toast('请填写车辆联系人')
				}else if(this.scale == '') {
					uni.$u.toast('请填写门店规模')
				}else if(this.address == '') {
					uni.$u.toast('请填写门店地址')
				}else if(this.imageUrl == '') {
					uni.$u.toast('请上传门店图片')
				}else{
					this.postMessage()
				}
			},
			//post信息给后端
			postMessage() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/user/user/storejoin',
					method: 'POST',
					data: {
						busid: this.userData.id,//用户id
						name: this.contacts,//联系人姓名
						mobile: this.mobile,//联系人电话
						scale: this.scale,//门店规模
						address: this.address,//门店地址
						imagelist: this.imageUrl,//门店图片
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.statusCode === 200){
							uni.$u.toast('提交成功，请耐心等待通知')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pagesC/releaseCar/releaseRecords?id=0'
								})
							}, 1500)
						}else {
							uni.$u.toast('提交失败，请稍后再试')
						}
					}
				})
			},
			//获取门店图片上传后的路径
			getImage() {
				const { lists } = this.$refs.uUpload;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				const files = lists.filter(val => val.progress === 100);
				console.log(files)
				this.imageUrl = files.slice(0, 6).map(file => file.response.result).join(',');
			},
			
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.subscribeInfo {
	margin-top: 20rpx;

	.infoItem {
		height: 76rpx;
		display: flex;
		color: #5D5C5C;
		border-bottom: 1px solid #F1F1F1;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 0 30rpx;
		margin-top: 20rpx;

		.label {
			font-size: 34rpx;
		}

		.value {
			font-size: 32rpx;
			display: flex;
			margin-right: 10rpx;

			.icon {
				width: 40rpx;
			}
		}
	}

	.infoItem:last-child {
		border-bottom: 0;
	}
}
.title {
	font-size: 18px;
	margin-left: 15rpx;
}
.content {
	margin-top: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	.content-item {
		width: 30%;
		text-align: center;
		image{
			border: #5D5C5C 1px solid;
			border-radius: 10px;
			width: 100%;
			height: 110px;
		}
		text{
			color: black;
			font-size: 18px;
			font-weight: bold;
		}
	}
}
.bottom {
	text-align: center;
	font-size: 18px;
	margin-top: 110rpx;
}
.bottomone {
	width: 100%;
	margin: 0 auto;
}
.bottomtow {
	width: 50%;
	margin: 15px auto
}
.color {
	.colorone, .colortow{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		.colorone-item, .colortow-item {
			view{
				border: #5D5C5C 1px solid;
				border-radius: 5px;
			}
		}
	}
	.colortow {
		margin-top: 10px;
	}
}
.show {
	width: 90%;
	margin: 0 auto;
	.show-title {
		margin-top: 50px;
		font-size: 18px;
	}
	.show-content{
		margin-left: 50rpx;
		color: #5D5C5C;
	}
}
.image{
	.image-top {
		font-size: 34rpx;
		padding: 15px;
	}
	.top-tishi {
		font-size: 25rpx;
	}
}
.price-item {
	margin-left: 15rpx;
}
</style>
